<template >
  <el-container class="colorboard1" style="padding: 1%;">
  <el-header>
    <RouterLink to="/">
      <el-image style="width: 200px; height: 50px" :src="'DevStar.png'"  />
    </RouterLink>
    <div style="float: right;">
        <template v-if="isLoggedIn">
          <span>欢迎您, {{ username }} |</span>
          <el-button type="text" @click="logout">登出</el-button>
        </template>
        <template v-else>
          <RouterLink to="/login">
            <el-button type="primary">登录</el-button>
          </RouterLink>
        </template>
      </div>
  </el-header>
  <el-container style="min-height: 1920px; background-color:rgb(50, 50, 64);">
    <el-aside width="200px"> <el-scrollbar>
        <el-menu class="colorboard1">
          <RouterLink to="/ide-templates">
          <el-menu-item index="1" class="colorboard1">
            <template #title>
              <el-icon><message /></el-icon>开发环境模板
            </template>
          </el-menu-item>
        </RouterLink>
        <RouterLink to="/recommend-apps">
          <el-menu-item index="2" class="colorboard1">
            <template #title style="">
              <el-icon><icon-menu /></el-icon>应用模板
            </template>
          </el-menu-item>
        </RouterLink>
        <RouterLink to="/my-templates">          
            <el-menu-item index="3" class="colorboard1">
            <template #title>
              <el-icon><setting /></el-icon>我的开发环境
            </template>
          </el-menu-item>
        </RouterLink>
        </el-menu>
      </el-scrollbar></el-aside>
      <el-main>
        <RouterView></RouterView>
      </el-main>
  </el-container>
</el-container>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import {RouterView,RouterLink} from 'vue-router'
const isLoggedIn = ref(false); 
const username = ref('');

async function checkLoginStatus() {
    // 假设token存储在localStorage中
    const token = localStorage.getItem('authToken');

    if (!token) {
        console.log('用户未登录');
        return false;
    }

    try {
        const response = await fetch('${window.location.protocol}//${window.location.hostname}/api/verify-token', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ token: token })
        });

        const data = await response.json();
        console.log(data);
        if (response.ok) {
            console.log('登录成功');
            isLoggedIn.value = true;
            username.value = data.username;
            return true;  // 返回登录状态为true
        } else {
            console.log('验证失败:', data.error);
            isLoggedIn.value = false;
            username.value = '';
            return false;  // 返回登录状态为false
        }
    } catch (error) {
        console.error('检查登录状态时出错:', error);
        isLoggedIn.value = false;
        username.value = '';
        return false;  // 如果发生错误，也返回未登录
    }
}
function logout() {
    localStorage.removeItem('authToken');
    console.log(localStorage.getItem('authToken'));
    window.location.reload(); // 刷新页面以更新状态
}
checkLoginStatus();
</script>
<style scoped>
    .colorboard1{
        background-color:rgb(50, 50, 64);
        color:white;
        font-family: "等线";
    }
</style>